<template>
  <div class="services">
    <h1 class="section-title">用车助手</h1>
    
    <div class="service-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        @click="activeTab = tab.id"
        :class="{ active: activeTab === tab.id }"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <div class="tab-content" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <div class="calculator-tool" v-if="activeTab === 'calculator'" style="background: #f9f9f9; padding: 20px; border-radius: 8px;">
        <div class="calculator-form">
          <h3>用车成本计算器</h3>
          <div class="form-group">
            <label>车型</label>
            <select v-model="calculator.carModel">
              <option value="">请选择车型</option>
              <option v-for="model in carModels" :value="model.id" :key="model.id">
                {{ model.name }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label>年行驶里程(公里)</label>
            <input type="number" v-model="calculator.mileage">
          </div>
          
          <div class="form-group">
            <label>燃油类型</label>
            <select v-model="calculator.fuelType">
              <option value="gasoline">汽油</option>
              <option value="diesel">柴油</option>
              <option value="electric">电动</option>
              <option value="hybrid">混动</option>
            </select>
          </div>
          
          <button class="btn-calculate" @click="calculateCost">
            计算用车成本
          </button>
          
          <div class="result" v-if="calculationResult">
            <h4>预估年用车成本</h4>
            <div class="cost-item">
              <span>燃油/电费:</span>
              <span>¥{{ calculationResult.fuelCost }}</span>
            </div>
            <div class="cost-item">
              <span>保险:</span>
              <span>¥{{ calculationResult.insurance }}</span>
            </div>
            <div class="cost-item">
              <span>保养:</span>
              <span>¥{{ calculationResult.maintenance }}</span>
            </div>
            <div class="cost-item total">
              <span>总计:</span>
              <span>¥{{ calculationResult.total }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="recall-check" v-if="activeTab === 'recalls'" style="background: #fff; padding: 20px; border-radius: 8px;">
        <h3>车辆召回查询</h3>
        <div class="search-box">
          <input 
            type="text" 
            v-model="recallSearch" 
            placeholder="输入车型或VIN码查询召回信息"
          >
          <button @click="searchRecalls">查询</button>
        </div>
        
        <div class="recall-list" v-if="recallResults.length > 0">
          <div class="recall-item" v-for="recall in recallResults" :key="recall.id">
            <h4>{{ recall.title }}</h4>
            <p class="date">发布日期: {{ recall.date }}</p>
            <p class="description">{{ recall.description }}</p>
            <a :href="recall.link" target="_blank" class="btn-details">查看详情</a>
          </div>
        </div>
        
        <div class="no-results" v-else-if="recallSearch && !isSearching">
          未找到相关召回信息
        </div>
      </div>
      
      <div class="roadside-assistance" v-if="activeTab === 'roadside'" style="background: #fff; padding: 20px; border-radius: 8px;">
        <h3>24小时道路救援</h3>
        <div class="assistance-options">
          <div class="option-card" @click="requestAssistance('towing')">
            <div class="option-icon">🚛</div>
            <h4>拖车服务</h4>
            <p>车辆故障无法行驶时提供拖车服务</p>
          </div>
          
          <div class="option-card" @click="requestAssistance('battery')">
            <div class="option-icon">🔋</div>
            <h4>电瓶搭电</h4>
            <p>电瓶没电时提供紧急搭电服务</p>
          </div>
          
          <div class="option-card" @click="requestAssistance('tire')">
            <div class="option-icon">🛞</div>
            <h4>轮胎更换</h4>
            <p>爆胎或轮胎损坏时提供备胎更换服务</p>
          </div>
          
          <div class="option-card" @click="requestAssistance('fuel')">
            <div class="option-icon">⛽</div>
            <h4>紧急送油</h4>
            <p>燃油耗尽时提供紧急送油服务</p>
          </div>
        </div>
        
        <div class="emergency-contact">
          <p>紧急联系电话: 400-888-9999</p>
          <button class="btn-call" @click="callEmergency">
            <span>立即拨打</span>
          </button>
        </div>
      </div>
      
    
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServicesView',
  data() {
    return {
      tabs: [
        { id: 'calculator', name: '用车成本计算' },
        { id: 'recalls', name: '召回查询' },
        { id: 'roadside', name: '道路救援' },

      ],
      activeTab: 'calculator',
      searchQuery: '',
      filteredDealers: [],
      serviceCategories: [
        { id: 'warranty', name: '保修服务', icon: '/images/warranty-icon.png' },
        { id: 'maintenance', name: '基础保养', icon: '/images/maintenance-icon.png' },
        { id: 'repair', name: '维修服务', icon: '/images/repair-icon.png' },
        { id: 'inspection', name: '车辆检测', icon: '/images/inspection-icon.png' }
      ],
      selectedCategory: 'warranty',
      calculator: {
        carModel: '',
        mileage: 15000,
        fuelType: 'gasoline'
      },
      carModels: [
        { id: 'model1', name: '奔驰 C级' },
        { id: 'model2', name: '奔驰 E级' },
        { id: 'model3', name: '奔驰 S级' },
        { id: 'model4', name: '奔驰 GLC' }
      ],
      calculationResult: null,
      recallSearch: '',
      recallResults: [],
      isSearching: false,
      emergencyNumber: '400-888-9999'
    }
  },
  computed: {
    servicesByCategory() {
      return this.services.filter(service => service.category === this.selectedCategory);
    }
  },
  methods: {
    calculateCost() {
      // 根据车型、里程和燃油类型计算成本
      const baseCosts = {
        'model1': { base: 80000, fuelRate: 0.08 }, // 奔驰 C级
        'model2': { base: 100000, fuelRate: 0.1 }, // 奔驰 E级
        'model3': { base: 150000, fuelRate: 0.12 }, // 奔驰 S级
        'model4': { base: 90000, fuelRate: 0.09 }  // 奔驰 GLC
      };
      
      const fuelTypeMultiplier = {
        'gasoline': 1.0,
        'diesel': 0.9,
        'electric': 0.5,
        'hybrid': 0.7
      };
      
      const selectedModel = baseCosts[this.calculator.carModel] || baseCosts['model1'];
      const mileage = this.calculator.mileage || 15000;
      
      // 计算各项成本
      const fuelCost = Math.round(mileage * selectedModel.fuelRate * fuelTypeMultiplier[this.calculator.fuelType]);
      const insurance = Math.round(selectedModel.base * 0.12);
      const maintenance = Math.round(selectedModel.base * 0.05);
      const total = fuelCost + insurance + maintenance;
      
      this.calculationResult = {
        fuelCost,
        insurance,
        maintenance,
        total
      };
    },
    
    searchRecalls() {
      this.isSearching = true;
      // 模拟API调用
      setTimeout(() => {
        this.recallResults = [
          {
            id: 'recall1',
            title: '安全气囊系统召回',
            date: '2023-05-15',
            description: '由于安全气囊控制单元可能存在故障，需进行免费更换',
            link: '#'
          },
          {
            id: 'recall2',
            title: '燃油泵召回',
            date: '2023-03-10',
            description: '燃油泵可能在工作时失效，导致发动机熄火',
            link: '#'
          }
        ];
        this.isSearching = false;
      }, 1000);
    },
    
    requestAssistance(type) {
      alert(`已请求${this.getAssistanceName(type)}服务，救援人员将尽快与您联系！`);
    },
    
    getAssistanceName(type) {
      const names = {
        towing: '拖车',
        battery: '电瓶搭电',
        tire: '轮胎更换',
        fuel: '紧急送油'
      };
      return names[type] || '道路救援';
    },
    
    callEmergency() {
      window.location.href = `tel:${this.emergencyNumber}`;
    },
    
    filterDealers() {
      if (!this.searchQuery) {
        this.filteredDealers = this.dealers;
        return;
      }
      
      const query = this.searchQuery.toLowerCase();
      this.filteredDealers = this.dealers.filter(dealer => {
        return dealer.name.toLowerCase().includes(query) || 
               dealer.address.toLowerCase().includes(query);
      });
    },
    locateNearestDealer() {
      // 这里可以集成地图API获取用户位置并查找最近经销商
      alert('正在定位您的位置并查找最近经销商...');
    },
    callDealer(phone) {
      // 这里可以调用电话功能
      console.log('拨打电话:', phone);
    },
    showOnMap(dealer) {
      // 这里可以打开地图显示经销商位置
      console.log('查看地图:', dealer.name, dealer.coordinates);
    },
    bookService(service) {
      // 这里可以跳转到预约页面
      console.log('预约服务:', service.name);
    }
  },
  mounted() {
    this.filteredDealers = this.dealers;
  }
}
</script>

<style scoped>
.services-container {
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  color: #c0c0c0;
  font-weight: 250;
  letter-spacing: 0.05em;
}
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
}

.calculator-form {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.calculator-form h3 {
  color: #000;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group select,
.form-group input[type="number"] {
  width: 70%;
  padding: 9px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 1rem;
}

.btn-calculate {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 15px;
}

.btn-calculate:hover {
  background-color: #333;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cost-item.total {
  font-weight: bold;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.recall-check {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.recall-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.recall-item h4 {
  color: #000;
  margin-bottom: 10px;
}

.date {
  color: #666;
  font-size: 0.9rem;
}

.description {
  margin: 10px 0;
  line-height: 1.6;
}

.btn-details {
  display: inline-block;
  padding: 8px 15px;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

.roadside-assistance {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 20px;
}

.assistance-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.option-card {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.option-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.emergency-contact {
  margin-top: 20px;
  text-align: center;
}

.btn-call {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;
}

.service-item {
  background: rgba(30, 30, 30, 0.7);
  border-radius: 4px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.service-item:hover {
  background: rgba(40, 40, 40, 0.7);
  transform: translateY(-5px);
}

.service-item h3 {
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 300;
  font-size: 1.5rem;
}

.service-item p {
  color: #aaa;
  line-height: 1.8;
  font-weight: 300;
}
.services {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}


.service-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.service-tabs button {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color:#606060
}

.service-tabs button:hover {
  color: #ffffff;
}

.service-tabs button.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
  font-weight: bold;
}

.tab-content {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
}

.search-box {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.search-box input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.search-box button {
  padding: 0 1.5rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-box button:hover {
  background-color: #0052a3;
}

.dealer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.dealer-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dealer-info h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.dealer-info p {
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.dealer-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}

.dealer-actions button {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-call {
  background-color: #4CAF50;
  color: white;
}

.btn-call:hover {
  background-color: #3e8e41;
}

.btn-map {
  background-color: #2196F3;
  color: white;
}

.btn-map:hover {
  background-color: #0b7dda;
}

.service-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.category-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #eee;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category-card.active {
  border-color: #0066cc;
  background-color: #f0f7ff;
}

.category-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-list {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.service-item:last-child {
  border-bottom: none;
}

.service-info h4 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.service-info p {
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.service-meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.service-meta span {
  font-size: 0.9rem;
}

.price {
  color: #e74c3c;
  font-weight: bold;
}

.duration {
  color: #666;
}

.btn-book {
  padding: 0.6rem 1.2rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-book:hover {
  background-color: #0052a3;
}
</style>